<template>
  <div class="body">
    <div class="product-region">
      <el-image
        class="product-img"
        :src="product.productPicture"
      />
      <div class="product-info">
        <div class="trace">追溯码：{{ product.traceId }}</div>
        <div class="product-name">产品名：{{ product.productName }}</div>
        <div class="product-desc">描述：{{ product.productDesc }}</div>
        <div class="product-price">价格：￥{{ product.productPrice }}</div>
      </div>
    </div>
    <div class="region">
      <div>
        <div class="title">
          1.供应商信息
        </div>
        <div class="info">
          <div class="col">
            <div>
              公司名称: {{ supplier.supplierName }}
            </div>
            <div>
              公司电话: {{ supplier.supplierPhone }}
            </div>
            <div>
              产品种类: {{ supplier.supplierType }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        2.加工信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            加工厂: {{ factory.factoryName }}
          </div>
          <div>
            地址: {{ factory.factoryAddress }}
          </div>
          <div>
            手机号: {{ factory.factoryPhone }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        3.进货信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            供货商: {{ deliver.supplierName }}
          </div>
          <div>
            电话: {{ deliver.supplierPhone }}
          </div>
          <div>
            送货人: {{ deliver.deliverName }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        4.原料质检信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            检测员: {{ materialInspection.staffName }}<span v-if="materialInspection.staffPosition">({{ materialInspection.staffPosition }})</span>
          </div>
          <div>
            电话: {{ materialInspection.staffPhone }}
          </div>
          <div>
            送货人: {{ materialInspection.deliverName }}
          </div>
        </div>
        <div class="col">
          <div>
            微生物指标: {{ materialInspection.tinyCreateContent }}
          </div>
          <div>
            药品残留量: {{ materialInspection.drugResidue }}
          </div>
          <div>
            质量: {{ materialInspection.weigihtOk }}
          </div>
        </div>
        <div class="col">
          <div>
            检测通过: {{ materialInspection.inspecitonJudge ? '是' :'否' }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        5.原料出入库信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            工厂名字: {{ materialWarehouse.factoryName }}
          </div>
          <div>
            原料名字: {{ materialWarehouse.materialName }}
          </div>
          <div>
            描述: {{ materialWarehouse.mateiralDesc }}
          </div>
        </div>
        <div class="col">
          <div>
            出入库人员: {{ materialWarehouse.staffName }}<span v-if="materialWarehouse.staffPosition">({{ materialInspection.staffPosition }})</span>
          </div>
          <div>
            出库时间: {{ materialWarehouse.outTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        6.加工信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            加工厂: {{ process.factoryName }}
          </div>
          <div>
            入库批次: {{ process.materialWarehouseId }}
          </div>
          <div>
            员工: {{ process.staffName }}
          </div>
        </div>
        <div class="col">
          <div>
            电话: {{ process.staffPhone }}
          </div>
          <div>
            加工完成时间: {{ process.finishTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        7.产品质检信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            质检编号: {{ productInspection.inspectionId }}
          </div>
          <div>
            员工姓名: {{ productInspection.staffName }}
          </div>
          <div>
            员工电话: {{ productInspection.staffPhone }}
          </div>
        </div>
        <div class="col">
          <div>
            时间: {{ productInspection.gmtModified }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        8.包装信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            包装批次: {{ apackage.packageId }}
          </div>
          <div>
            员工姓名: {{ apackage.staffName }}
          </div>
          <div>
            员工电话: {{ apackage.staffPhone }}
          </div>
        </div>
        <div class="col">
          <div>
            打包方式: {{ apackage.packageType }}
          </div>
          <div>
            打包规格: {{ apackage.packageSpecification }}
          </div>
          <div>
            时间: {{ apackage.gmtModified }}
          </div>
        </div>
      </div>
    </div>
    <div class="region">
      <div class="title">
        9.产品出库信息
      </div>
      <div class="info">
        <div class="col">
          <div>
            出库批次: {{ productWarehouse.productHouseId }}
          </div>
          <div>
            出库人员: {{ productWarehouse.staffName }}
          </div>
          <div>
            电话: {{ productWarehouse.staffPhone }}
          </div>
        </div>
        <div class="col">
          <div>
            出库时间: {{ productWarehouse.gmtModified }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTraceInfoByTraceId } from '@/api/prot/trace'
export default {
  data() {
    return {
      product: {},
      supplier: {},
      factory: {},
      deliver: {},
      materialInspection: {},
      materialWarehouse: {},
      process: {},
      productInspection: {},
      apackage: {},
      productWarehouse: {}
    }
  },
  created() {
    let traceId = this.$route.query.traceId
    const product = this.$route.params.product
    if (product) {
      this.product = JSON.parse(product)
      traceId = this.product.traceId
    }
    if (traceId) {
      getTraceInfoByTraceId(traceId).then(res => {
        this.product = res.data.product
        this.supplier = res.data.supplier
        this.factory = res.data.factory
        this.deliver = res.data.deliver
        this.materialInspection = res.data.materialInspection
        this.materialWarehouse = res.data.materialWarehouse
        this.process = res.data.process
        this.productInspection = res.data.productInspection
        this.apackage = res.data.package
        this.productWarehouse = res.data.productWarehouse
        this.product.traceId = traceId
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
.body {
  width: 1000px;
}

.title {
  background-color: #ccc;
  padding: 5px;
  margin-top: 10px;
}

.product-region {
  margin: 10px 0;
  display: flex;
  .product-img {
    width: 150px;
    height: 120px;
  }
  .product-info {
    margin-left: 10px;
    div {
      margin-top: 10px;
    }
  }
}

.region {
  .info {
    display: flex;

    .col {
      width: 300px;
      margin-top: 0px;
    }
    div {
      margin-top: 10px;
      color: #333;
    }
  }
}
</style>
